<template>
  <div class="rainfall-forecast">
    <!-- 雨量模式预报 -->
    <div class="inspect-search">
      <search-form
        :search-fields="form"
        :search-form="forms"
        :rules="rules"
        @handle-search="handleSearch"
      >
        <search-sites
          :site-name="form.stationName"
          @change-site="
            (n) => {
              form.stationName = n;
            }
          "
        />
      </search-form>
    </div>
    <div class="inspect-display">
      <div class="inspect-btns">
        <el-button-group class="inspect-display-btns">
          <el-button
            class="inspect-display-btn"
            :type="mode === '0' ? 'primary' : 'default'"
            size="mini"
            @click="changeMode('0')"
          >
            表格展示
          </el-button>
          <el-button
            class="inspect-display-btn"
            :type="mode === '1' ? 'primary' : 'default'"
            size="mini"
            @click="changeMode('1')"
          >
            图形展示
          </el-button>
        </el-button-group>
        <!-- <el-button class="inspect-download-btn" type="success" size="mini">
          下 载
        </el-button> -->
      </div>
      <!-- 表格 -->
      <datagrid
        max-height="100%"
        :data-list="inspectList"
        :columns="columns"
        :total="total"
        :current-page="1"
        :page-size="5"
        :loading="loading"
        v-show="mode === '0'"
      >
        <el-table-column
          align="center"
          label="模式"
          prop="pattern"
          slot="pattern"
          :formatter="formatPattern"
        />
      </datagrid>
      <!-- 图形 -->
      <div class="inspect-chart-wrapper" v-show="mode === '1'">
        <!-- <el-button-group class="inspect-chart-btns">
          <el-button
            size="mini"
            class="inspect-chart-btn"
            :class="{ 'is-active': chartType === 'bar' }"
            @click="changeChartType('bar')"
          >
            柱状图
          </el-button>
          <el-button
            size="mini"
            class="inspect-chart-btn"
            :class="{ 'is-active': chartType === 'line' }"
            @click="changeChartType('line')"
          >
            折线图
          </el-button>
        </el-button-group> -->
        <div class="inspect-chart-box">
          <chart :c-option="option" ref="myChart" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SearchForm from '@/components/SearchForm'
import Datagrid from '@/components/Datagrid'
import SearchSites from '@/components/SearchSites'
import Chart from '@/components/Chart'

import dayjs from 'dayjs'

import { patterns, methods, hours_f } from '@/utils/constant.js'
import { postAction } from '@/api/action';
export default {
  name: 'RainfallForecast',
  components: { SearchForm, Datagrid, SearchSites, Chart },
  data() {
    return {
      urls: {
        inspect: '/api/inspection/list',
        sites: '/api/sites/getSitesList',
      },
      total: 0,
      loading: false,
      inspectList: [],
      form: {
        startDate: dayjs().format('YYYY-MM-DD'), // 时间
        startTime: '08', // 时效
        stationName: '梧州市', // 站名
        pageNo: 0,
        pageSize: 10,
      },
      forms: [{
        label: '时间',
        field: 'startDate',
        type: 'date'
      }, {
        label: '时次',
        field: 'startTime',
        type: 'select',
        options: hours_f,
      }, {
        label: '站名/区域',
        field: 'stationName',
        type: 'select',
        slot: true,
      },],
      columns: [
        {
          label: '模式',
          prop: 'pattern',
          slot: true,
        }, {
          label: '12时效',
          prop: 'time12'
        }, {
          label: '24时效',
          prop: 'time24'
        }, {
          label: '36时效',
          prop: 'time36'
        }, {
          label: '48时效',
          prop: 'time48'
        }, {
          label: '60时效',
          prop: 'time60'
        }, {
          label: '72时效',
          prop: 'time72'
        }
      ],
      rules: {
        startDate: [{ required: true }],
        startTime: [{ required: true }],
        stationName: [{ required: true }],
      },
      mode: '0',
      chartType: 'bar',
      option: {},
    }
  },
  computed: {
    formatFileName() {
      const { stationName, startDate, startTime } = this.form;
      return `${stationName} ${startDate} ${startTime}时检验数据`;
    },
  },
  watch: {
    formatFileName: {
      handler(newV, oldV) {
        // 更新图形的title，即下载的图片名
        this.option.imgName = newV;
        // this.$nextTick(() => {
        //   this.$refs.myChart.updateChart();
        // })
      },
      immediate: true,
    }
  },
  created() {
    this.handleSearch();
  },
  methods: {
    async getData() {
      this.loading = true;
      await postAction(this.urls.inspect, this.form).then(res => {
        console.log('模式雨量预报', res);
        if (res.msg === '查询成功，但无数据') {
          this.$message(res.msg);
          this.loading = false;
        }
        this.inspectList = [];
        this.option.series = [];
        this.option.xData = [];
        if (res.msg === '成功' && res.object) {
          this.option.xData = ['12', '24', '36', '48', '60', '72'];
          this.inspectList = res.object.records;
          this.loading = false;
        }
        this.formatChartData(res.object && res.object.records);
      })
      this.loading = false;
    },
    // 格式化检验模式
    formatPattern(row, column, cell) {
      return patterns[+row[column.property]].label;
    },
    // 处理图形数据
    formatChartData(obj) {
      if (obj) {
        obj.map(item => {
          const sData = [];
          for (let index = 0; index < this.option.xData.length; index++) {
            sData.push(item['time' + this.option.xData[index]]);
          }
          this.option.series.push({
            name: methods[+item.pattern].label,
            type: this.chartType,
            barWidth: 20,
            data: sData,
            label: { show: true },
          });
        })
      }
      // this.option.yName = this.forms[this.forms.length - 1].options[+this.form.methond].label;
      this.$refs.myChart.updateChart();
      console.log('option', this.option);
    },
    // 搜索
    handleSearch(valid) { this.getData(); },
    // 切换展示模式
    changeMode(type) {
      this.mode = type;
      setTimeout(() => {
        this.$refs.myChart.resizeChart();
      }, 0);
    },
    // 切换图表类型
    changeChartType(type) {
      this.chartType = type;
      for (let index = 0; index < this.option.series.length; index++) {
        this.option.series[index].type = type
      }
    },
  }
}
</script>

<style lang="scss">
.rainfall-forecast {
  height: 100%;
  display: flex;
  flex-direction: column;
  .inspect-search {
    padding: 0 1em !important;
  }
  .inspect-display {
    flex: 1;
  }
  .datagrid-table-wrapper {
    padding: 1em 2em;
    height: calc(100% - 80px);
  }
}
</style>